<template>
  <div class>
    <div class="card tr mb2"></div>

    <el-table ref="dragTable" row-key="id" :data="dataList" border style="width: 100%">
      <el-table-column type="index" width="60px" fixed="left" align="center" label="序号"></el-table-column>
      <el-table-column
        v-for="(item,index) in allItemList"
        :key="index"
        :label="item.name"
        v-if="item.show"
      >
        <template slot-scope="scope">
          <template v-if="!item.formatter">{{ scope.row[item.key] }}</template>
          <template v-else>
            <span v-text="item.formatter(scope.row, item)"></span>
          </template>
        </template>
      </el-table-column>

      <el-table-column width="250px" label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showTask(scope.row)">查看</el-button>
          <el-button size="mini" type="danger" @click="deleteInstance(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div class="card" style="text-align:right;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[ 10, 20,30, 40]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog title="处理任务" :visible.sync="taskFormVisiable" width="70%" >
        <task-form  :taskId="0" :instanceId="instanceId" @dealTask="dealTask" @cancel="cancel"></task-form>
    </el-dialog>

  </div>
</template>
<script>
import { getList, deleteInstance } from "./function";
import TaskForm from "../../form/taskForm/index";
const defaultFormColumn = [
  {
    name: "实例ID",
    key: "instanceId",
    align: "center",
    width: 100,
    show: true,
  },
  {
    name: "流程定义ID",
    key: "definitionId",
    align: "center",
    show: true,
  },
  {
    name: "businessKey",
    key: "businessKey",
    align: "center",
    show: true,
  },

];

export default {
  components:{
      TaskForm
  },
  data() {
    return {
      instanceId: 0,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      allItemList: defaultFormColumn,
      taskFormVisiable: false,
      dataList: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      getList(params).then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.dataList = res.retBody;
          this.total = res.retBody.total;
          this.currentPage = res.retBody.pageNum;
        }
      });
    },
    showTask(row) {
      this.taskFormVisiable = true;
      this.instanceId = row.instanceId;
    },
    dealTask(flowParamsItem) {
      this.taskFormVisiable = false;
    },
    /**
     * 删除
     */
    deleteInstance(row) {
      this.$confirm("确定要删除实例吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = {
          instanceId: row.instanceId
        };
        deleteInstance(params).then(res => {
          if (res.retHead.code == "0000000") {
            this.$message({
              message: "操作成功！",
              type: "success"
            });
            this.initData();
          } else {
            this.$message({
              message: "操作失败！",
              type: "error"
            });
          }
        });
      });
    },
    cancel() {
       this.taskFormVisiable = false;
    },
    deleteCancel() {},

    sizeChange(n) {
      this.pageSize = n;
      this.init();
    },
    currentChange(n) {
      this.currentPage = n;
      this.init();
    }
  }
};
</script>

